<template>
  <!-- 富文本 -->
  <div>
    <Editor v-model="contentValue" :init="initOption" :disabled="disabled" />
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import { upload, imgUrl } from "@/utils/http";
import Editor from '@tinymce/tinymce-vue'
import tinymce from 'tinymce/tinymce'


export default {
  components: {
    Editor
  },
  props: {
    //用于自定义v-model的value，这个名称是固定的
    modelValue: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    plugins: {
      type: [String, Array],
      default:
        "preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr nonbreaking insertdatetime advlist lists wordcount imagetools textpattern autosave  autoresize "
    },
    toolbar: {
      type: [String, Array],
      default:
        "code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link codesample | alignleft aligncenter alignright alignjustify outdent indent  formatpainter | \
    styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
    table image media charmap hr pagebreak insertdatetime |  fullscreen preview"
    }
  },
  emits: ['update:modelValue'],//更新modelValue事件
  computed: {
    //富文本框内容
    contentValue: {
      get() {//取值
        return this.modelValue;
      },
      set(value) {//赋值 
        this.$emit("update:modelValue", value)
      }
    }
  },
  data() {
    return {
      //初始化配置
      initOption: {
        base_url: "/tinymce", //【必要参数】指定public的目录
        language: 'zh_CN',  //语言类型，默认会到tinymce/langs/zh_CN.js文件   
        plugins: this.plugins,  //插件配置
        toolbar: this.toolbar,  //工具栏配置，设为false则隐藏
        toolbar_mode: "sliding", //工具栏移除模式 floating / sliding / scrolling / wrap 
        fontsize_formats: '12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px',  //字体大小
        font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;',  //字体样式
        lineheight_formats: "0.5 0.8 1 1.2 1.5 1.75 2 2.5 3 4 5",  //行高配置，也可配置成"12px 14px 16px 20px"这种形式 
        height: 400,  //注：引入autoresize插件时，此属性失效
        max_height:600,
        placeholder: '在这里输入文字',
        branding: false,  //tiny技术支持信息是否显示
        resize: false,  //编辑器宽高是否可变，false-否,true-高可变，'both'-宽高均可，注意引号 
        elementpath: false,  //元素路径是否显示 
        content_style: "img {max-width:100%;}",  //直接自定义可编辑区域的css样式 
        paste_data_images: true,  //图片是否可粘贴
        //自定义图片上传逻辑
        images_upload_handler: (blobInfo, success, failure) => {
          const formData = new FormData();
          formData.append("file", blobInfo.blob());
          upload(imgUrl, formData).then((res) => {
            success(res.url)
          }).catch((err) => {
            failure(err.response.data.message);
          });
        }
      },
      content: this.value
    };
  }
};
</script>